<template>
	<div class = "wrap">
		<div class = "top">
			<img :src="list.cover">
			<a href="javascript:alert('该音乐仅可在ONE·一个 app内播放。和我们一起守护音乐版权，下载ONE·一个app畅听。');">播放</a>
		</div>
		<p class = "title" v-if = "list.story_author">
			{{list.title}}<br />
			{{list.album}}<br />
			{{list.story_author.user_name}}
		</p>
		<h2>{{list.story_title}}</h2>
		<p class = "author_name" v-if = "list.story_author">文/{{list.story_author.user_name}}</p>
		<div class = "story" v-html = "list.story"></div>
		<p class = "editor">{{list.charge_edt}} {{list.editor_email}}</p>
		<p class = "copyright">{{list.copyright}}</p>
		<author :authorInfo = "list.author_list"></author>
		<comment :type = "type" :id = "list.id"></comment>
		<download></download>
		<paging :type = "type" :next = "list.next_id" :prev = "list.previous_id"></paging>
	</div>
</template>

<script>
import axios from 'axios'
import author from '@/common/author'
import download from '@/common/download'
import comment from '@/common/comment'
import paging from '@/common/paging'
export default {
	name : 'musicDetail',
	data () {
		return {
			list : {},
			type : "music"
		}
	},
	components : {
		author,
		download,
		comment,
		paging
	},
	methods : {
		getData () {
			axios.get("http://v3.wufazhuce.com:8000/api/music/detail/"+this.$route.params.music_id+"?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getDatasucc);
		},
		getDatasucc (res) {
			if(res.data.res === 0 && res.data.data){
				this.list = res.data.data;
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getData();
	},
	watch : {
		$route : function() {
			this.getData();
		}
	}
}
</script>

<style lang = "less" scoped>
	.wrap {
		padding-top:7.6rem;
		overflow:hidden;
		.top {
			position: absolute;
		    left: -3.72rem;
		    top: -2.68rem;
		    width: 9.6rem;
		    height: 9.6rem;
		    border-radius: 4.9rem 4.9rem 4.9rem 0;
		    box-shadow: 0 0 .4rem 0.1rem rgba(230,230,230,0.6);
		    img {
		    	position: absolute;
		    	top:-.2rem;
		    	right:.3rem;
		    	width:100%;
		    	border-radius:50%;
		    }
		    > a {
		    	width:1.44rem;
		    	height:1.44rem;
		    	background: url("http://image.wufazhuce.com/music-detail-play.png") no-repeat center/100% 100%;
		    	position: absolute;
		    	right:3.94rem;
		    	bottom:3.76rem;
		    	z-index:2;
		    	text-indent:-9999rem;
		    }
		}
		> .title {
			text-align: center;
			line-height:.4rem;
			font-size:.28rem;
		}
		> h2 {
			font-size:.6rem;
			font-weight:700;
			padding:.5rem .4rem;
			text-align: center;
		}
		> .author_name {
			text-align: center;
			line-height:.4rem;
			font-size:.28rem;
		}
		.story {
			padding:.4rem;
			line-height:.6rem;
			font-size: .36rem;
			font-weight:300;
			/deep/ p {
				margin-bottom:.4rem;
				&.fr-ft-ns {
					font-size:.28rem;
				}
			}
			/deep/ .one-quote-warp p {
				color:#808080;
				margin-left:.5rem;
			}
			/deep/ img {
				width:100%;
			}
		}
		.editor,
		.copyright{
			color: #808080;
		    font-style: oblique;
		    margin: .4rem;
		    font-size: .24rem;
		}
		/deep/ .author {
			padding-left:.4rem;
		}
	}
</style>